<template>
  <div class="myCarousel">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in imgArr" :key="item">
        <img :src="item" alt>
        {{language}}
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      imgArrTatal: [
        [
        "../../static/en/1.png",
        "../../static/en/2.png",
        "../../static/en/3.png"
      ],
      [
        "../../static/ar/1.png",
        "../../static/ar/2.png",
        "../../static/ar/3.png"
      ],
      [
        "../../static/fr/1.png",
        "../../static/fr/2.png",
        "../../static/fr/3.png"
      ]
      ],
      imgArr: [
        "../../static/en/1.png",
        "../../static/en/2.png",
        "../../static/en/3.png"
      ]
    };
  },
  props: ["language"],
  mounted() {
    // console.log("mouted");
    $(".el-carousel__arrow--left").insertBefore($(".el-carousel"));
    $(".el-carousel__arrow--right").insertBefore($(".el-carousel"));
    // console.log($('.el-carousel__arrow--left'))
  },
  watch: {
    language(newValue, oldValue) {
      if (newValue == "ar") {
        this.imgArr = this.imgArrTatal[1];
      } else if(newValue == 'en') {
        this.imgArr = this.imgArrTatal[0];        
      }else if(newValue == 'fr') {
        this.imgArr = this.imgArrTatal[2];
      }
    }
  }
};
</script>

<style lang="scss">
.myCarousel {
  position: relative;
  height: 100%;
  .el-carousel {
    position: absolute;
    width: 910px;
    left: 494px;
    height: 100%;
    .el-carousel__container {
      height: 100%;
    }
    .el-carousel__indicators {
      visibility: hidden;
    }
    .el-carousel__item {
    }
  }
  .el-carousel__arrow--left {
    width: 46px;
    height: 80px;
    background-color: transparent;
    background-image: url("/static/images/n-49.png");
    background-size: cover;
    background-position: center;
    border-radius: initial;
    transform: rotateZ(180deg);
    transform-origin: 50% 25%;
    background-repeat: no-repeat;
  }
  .el-icon-arrow-left:before {
    content: "";
  }
  .el-carousel__arrow--right {
    width: 46px;
    height: 80px;
    right: 52px;
    border-radius: initial;
    background-color: transparent;
    background-image: url("/static/images/n-49.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .el-icon-arrow-right:before {
    content: "";
  }
}
@media screen and(max-width:800px) {
  .myCarousel {
    position: relative;
    height: 100%;
    .el-carousel {
      position: absolute;
      width: 1271px;
      left: 310px;
      height: 100%;
    }
  }
}
</style>